<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>统计分析</cite></a>
        <a><cite>分类销售统计</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">分类销售统计</div>

        <div class="layui-card-body" style="width: 50%;">
            <form class="layui-form" lay-filter="formSearch">
                <div class="layui-form-item" style="margin-top: 10px;">
                    <label class="layui-form-label">年份:</label>
                    <div class="layui-input-block">
                        <input type="" placeholder="请输入(4位数的)年份" autocomplete="off"
                               class="layui-input" id="yy" style="display: none">
                        <input type="text" class="layui-input" id="test1" name="year">
                    </div>
                </div>
            </form>
            <button type="button" class="layui-btn" id="search-btn">搜索</button>
        </div>


        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><b>销售统计表</b></div>
                        <div class="layui-card-body">
                            <table id="by-type-table-parseData" lay-filter="by-type-table-parseData"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <b>销售统计图</b>
                        </div>
                        <div class="layui-card-body">
                            <!-- 这里写Echarts -->
                            <div class="Echarts_type" style="width: 600px; height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    layui.use(['table', 'admin', 'form', 'tree', 'echarts'], function () {
        var admin = layui.admin
            , table = layui.table
            , $ = layui.$
            , echarts = layui.echarts
            , baseUrl = layui.setter.baseUrl
            , laydate = layui.laydate
            , form = layui.form;
        var year = document.getElementById('yy');

        year.value = new Date().getFullYear();

        laydate.render({
            elem: '#test1', //指定元素
            type: 'year',
            value: year.value
        });


        getData(year.value);

        $('#search-btn').click(function () {
            // var data = document.getElementById('test1').value
            var data = form.val('formSearch');
            getData(data.year);
        })

        function getData(year) {
            $.ajax({
                url: baseUrl + 'echarts/byType?year=' + year,
                type: 'GET',
                success: function (res) {
                    // 在这里使用res中的数据
                    renderTable(res.data);
                    // 在表格外部使用数据
                    renderEcharts(res.data);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

        function renderTable(data) {
            //第一个实例
            table.render({
                elem: '#by-type-table-parseData'
                , data: data
                // , cellMinWidth: 120
                , page: false
                , loading: true
                , cols: [[
                    {field: 'name', title: '商品类型'}
                    , {field: 'value', title: '销售额'}
                ]]
                // , response: {
                //     // statusName: 'code',
                //     statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                // }
                // , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                //     return {
                //         "code": res.code, //解析接口状态
                //         "msg": res.msg, //解析提示文本
                //         "data": res.data //解析数据列表
                //     };
                // },
            });
        }

        function renderEcharts(data) {
            var chartDom = $('.Echarts_type');
            var myChart = echarts.init(chartDom[0]);
            var option;

            option = {
                // title: {
                //     text: '某站点用户访问来源',
                //     subtext: '纯属虚构',
                //     left: 'center'
                // }
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '商品类型',
                        type: 'pie',
                        radius: '50%',
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        }

    });


</script>

<style>
    .update {
        margin-left: 20px;
        /* margin-bottom: 20px; */
    }
</style>